<template>
  <div class="home">
    <el-container>
      <el-main>
        <!-- 搜索区域 -->
        <div class="search-area">
          <h1>{{ systemStore.systemConfig.frontendName || '证书查询系统' }}</h1>
          <div class="search-content">
            <div class="search-box">
              <div class="search-tip">请输入证书编号查询</div>
              <el-input
                v-model="searchNumber"
                placeholder="请输入证书编号或证书条码"
                clearable
                size="large"
                @keyup.enter="handleSearch"
              />
              <el-button class="search-button" @click="handleSearch">
                <el-icon><Search /></el-icon>
                查询
              </el-button>
            </div>
          </div>
        </div>

        <!-- 分割线 -->
        <div class="divider"></div>

        <!-- 结果区域 -->
        <div v-if="notFound || certificate" class="result-container">
          <template v-if="certificate">
            <div v-if="certificate.status === 'active'" class="certificate-content">
              <!-- 证书信息区域 -->
              <div class="cert-info-area">
                <!-- 序号部分 -->
                <div class="cert-number-box">序号{{ certificate.sequence_number }}</div>

                <!-- 内容部分 -->
                <div class="cert-content-box">
                  <el-descriptions :column="1" border>
                    <el-descriptions-item
                      v-for="field in certificate.fields"
                      :key="field.field_name"
                      :label="getFieldName(field.field_name)"
                      class="cert-field-item"
                    >
                      {{ field.description }}
                    </el-descriptions-item>
                  </el-descriptions>
                </div>

                <div v-if="certificate.custom_text" class="custom-text">
                  <p>{{ certificate.custom_text }}</p>
                </div>
              </div>

              <!-- 底部二维码和按钮部分 -->
              <div class="cert-footer">
                <div class="qr-code-box">
                  <el-image
                    v-if="certificate.qr_code_url"
                    :src="fullQRCodeUrl"
                    :preview-src-list="[fullQRCodeUrl]"
                    fit="contain"
                    class="qr-code-image"
                  >
                    <template #placeholder>
                      <div class="image-placeholder">加载中...</div>
                    </template>
                    <template #error>
                      <div class="image-error">
                        <el-icon><PictureFilled /></el-icon>
                        <span>加载失败</span>
                      </div>
                    </template>
                  </el-image>
                </div>
                <div class="action-buttons">
                  <el-button type="primary" @click="handleDownload">下载到相册</el-button>
                  <el-button type="primary" @click="handleShare">分享给好友</el-button>
                </div>
              </div>
            </div>
            <div v-else class="message-wrapper">
              <div class="message-container">
                <el-icon :size="100" color="#909399"><CircleClose /></el-icon>
                <p class="message-text">此证书已停用</p>
              </div>
            </div>
          </template>

          <!-- 未找到证书 -->
          <div v-else class="message-wrapper">
            <div class="message-container">
              <el-icon :size="100" color="#909399"><DocumentDelete /></el-icon>
              <p class="message-text">未找到相关证书</p>
            </div>
          </div>
        </div>
      </el-main>

      <el-footer height="auto">
        <div class="footer">
          <div class="footer-content">

            <div class="company-info" v-html="systemStore.systemConfig.footer || '<div class=\'footer-links\'><a href=\'https://gitee.com/ztzjx/qr-code-certificate-management\' target=\'_blank\'>本系统免费开源地址</a></div>'">
            </div>
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Search, CircleClose, DocumentDelete, PictureFilled } from '@element-plus/icons-vue'
import { certificateApi } from '@/api/certificateApi'
import { fieldApi } from '@/api/fieldApi'
import { useSystemStore } from '@/stores/system'

const systemStore = useSystemStore()
const route = useRoute()
const router = useRouter()
const certificate = ref(null)
const fields = ref([])
const loading = ref(false)
const notFound = ref(false)
const searchNumber = ref('')
const companyInfo = ref(null)

// 获取系统名称
const systemName = computed(() => {
  return systemStore.systemConfig.frontendName?.trim() || '证书查询系统'
})

// 计算完整的二维码URL
const fullQRCodeUrl = computed(() => {
  if (!certificate.value?.qr_code_url) return ''
  // 确保URL以/api开头
  const url = certificate.value.qr_code_url
  return url.startsWith('/api') ? url : `/api${url}`
})

// 处理搜索
const handleSearch = async () => {
  if (!searchNumber.value) {
    ElMessage.warning('请输入证书编号')
    return
  }

  // 如果当前路径已经是搜索的证书号，直接重新加载数据
  if (route.params.certNumber === searchNumber.value) {
    await loadCertificate()
  } else {
    // 否则通过路由跳转
    router.push(`/view/${searchNumber.value}`)
  }
}

// 获取字段名称
const getFieldName = fieldName => {
  if (!fields.value?.length) return '未知字段'
  const field = fields.value.find(f => f.field_name === fieldName)
  return field ? field.name : '未知字段'
}

// 获取证书信息
const loadCertificate = async () => {
  try {
    loading.value = true
    const certNumber = route.params.certNumber
    if (certNumber) {
      searchNumber.value = certNumber

      const res = await certificateApi.getCertificateByNumber(certNumber)
      if (res.code === 200 && res.data) {
        certificate.value = res.data
        notFound.value = false
      } else {
        certificate.value = null
        notFound.value = true
      }
    }
  } catch (error) {
    console.error('获取证书失败:', error)
    certificate.value = null
    notFound.value = true
  } finally {
    loading.value = false
  }
}

// 获取字段列表
const fetchFields = async () => {
  try {
    const res = await fieldApi.getFields()
    if (res.code === 200) {
      fields.value = res.data.items
    }
  } catch (error) {
    console.error('Get fields error:', error)
    ElMessage.error('获取字段列表失败')
  }
}

onMounted(() => {
  fetchFields()
  loadCertificate()
  // 确保系统配置已加载
  if (!systemStore.systemConfig) {
    systemStore.fetchSystemConfig()
  }
})

// 监听路由参数变化
watch(
  () => route.params.certNumber,
  (newValue, oldValue) => {
    if (newValue && newValue !== oldValue) {
      loadCertificate()
    }
  }
)

// 下载到相册
const handleDownload = async () => {
  try {
    const response = await certificateApi.downloadQRCode(certificate.value.id)
    if (!response.data) {
      throw new Error('下载失败：没有收到数据')
    }

    const blob = new Blob([response.data], { type: 'image/png' })
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `${getCertNumber(certificate.value.fields)}.png`

    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)

    ElMessage.success('下载成功')
  } catch (error) {
    console.error('下载失败:', error)
    ElMessage.error('下载失败，请稍后重试')
  }
}

// 分享给好友
const handleShare = () => {
  const certNumber = getCertNumber(certificate.value.fields)
  const url = `${window.location.origin}/view/${certNumber}`
  navigator.clipboard
    .writeText(url)
    .then(() => {
      ElMessage.success('复制证书地址成功')
    })
    .catch(() => {
      // 如果浏览器不支持 clipboard API，使用传统方法
      const input = document.createElement('input')
      input.value = url
      document.body.appendChild(input)
      input.select()
      document.execCommand('copy')
      document.body.removeChild(input)
      ElMessage.success('复制证书地址成功')
    })
}

// 获取证书编号
const getCertNumber = fields => {
  const certNumberField = fields.find(f => f.field_name === 'cert_number')
  return certNumberField ? certNumberField.description : ''
}
</script>

<style lang="scss" scoped>
/* 基础布局 */
.home {
  min-height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  font-family: 'PingFang SC', 'SF Pro SC', 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue',
    'Helvetica', 'Arial', sans-serif;
}

.el-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.el-main {
  flex: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  overflow-y: auto;
}

/* 搜索区域 */
.search-area {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

h1 {
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  padding: 16px;
  background-color: #4489cc;
  line-height: 1.3;
  margin: 0;
  text-align: center;
  height: 8vh;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 720px;
  margin: 0 auto;
}

.search-content {
  width: 720px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.search-box {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.search-box :deep(.el-input-group__append) {
  display: none;
}

.search-button {
  width: 100%;
  height: 40px;
  background-color: #4489cc;
  border-color: #4489cc;
  color: white;
  margin-top: 12px;
}

.search-button:hover {
  background-color: #3b7ab8;
  border-color: #3b7ab8;
}

/* 移除序号显示 */
.cert-number-box {
  display: none;
}

/* 结果区域 */
.result-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 720px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.cert-info-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* 消息容器 */
.message-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
}

.message-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.message-text {
  font-size: 16px;
  color: #909399;
  text-align: center;
  margin-top: 16px;
  font-family: 'PingFang SC', 'SF Pro SC', 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue',
    'Helvetica', 'Arial', sans-serif;
}

/* 证书内容样式优化 */
.cert-number-box {
  padding: 6px;
  background: #f8fafc;
  border-radius: 4px;
  margin-bottom: 6px;
  font-size: 15px;
  color: #1e293b;
  text-align: center;
  border: 1px solid #e2e8f0;
}

.cert-content-box {
  background: #fff;
  border-radius: 4px;
  padding: 0;
  margin-bottom: 6px;
  border: 1px solid #e2e8f0;
  width: 100%;
}

.cert-content-box :deep(.el-descriptions__body) {
  width: 100%;
}

.cert-content-box :deep(.el-descriptions__table) {
  width: 100%;
  table-layout: fixed;
}

.cert-content-box :deep(.el-descriptions__cell) {
  padding: 0 !important;
}

.cert-content-box :deep(.el-descriptions__label) {
  width: 33.33% !important;
  background-color: #b8e0fb !important;
  color: #333;
  font-weight: normal;
  font-size: 15px;
  padding: 8px 12px !important;
  margin: 0;
  border: 1px solid #e0e0e0;
  line-height: 1.3;
  text-align: center;
}

.cert-content-box :deep(.el-descriptions__content) {
  width: 66.67% !important;
  color: #1e293b;
  font-size: 15px;
  padding: 8px 12px !important;
  line-height: 1.3;
}

.cert-footer {
  margin-top: auto;
  padding: 1vh 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5vh;
  border-top: none;
  background: #fff;
}

.qr-code-box {
  width: 120px;
  height: 120px;
  padding: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-code-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.image-placeholder,
.image-error {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 12px;
  gap: 4px;
}

.image-error {
  color: #f56c6c;
}

.action-buttons {
  gap: 8px;
}

.action-buttons .el-button {
  height: 32px;
  width: 120px;
  font-size: 14px;
  background-color: #4489cc;
  border-color: #4489cc;
  color: white;
}

.action-buttons .el-button:hover {
  background-color: #3b7ab8;
  border-color: #3b7ab8;
}

.custom-text {
  margin-top: 15px;
  text-align: center;
  color: #909399;
  font-size: 14px;
}

.image-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
}

/* PC端搜索框样式 */
.search-box :deep(.el-input__wrapper) {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
}

.search-box :deep(.el-input-group__append) {
  background-color: #3b82f6;
  border-color: #3b82f6;
  color: white;
  padding: 0 20px;
}

.search-box :deep(.el-input-group__append:hover) {
  background-color: #2563eb;
  border-color: #2563eb;
}

/* 移动端样式 */
@media screen and (max-width: 768px) {
  .home {
    height: 100vh; /* 使用固定高度 */
    overflow: hidden; /* 禁止滚动 */
  }

  .el-container {
    height: 100%; /* 占满高度 */
    overflow: hidden; /* 禁止滚动 */
  }

  .el-main {
    flex: 1;
    overflow: hidden; /* 禁止滚动 */
  }

  .search-area {
    padding: 0;
    max-width: 100%;
  }

  .result-container {
    flex: 1;
    overflow-y: auto; /* 只允许结果区域滚动 */
    width: 100%;
    padding: 0;
    max-width: 100%;
  }

  .cert-info-area {
    padding: 0.5vh 12px 0;
  }

  .el-footer {
    flex-shrink: 0; /* 防止footer被压缩 */
  }

  h1 {
    padding: 8px; /* 减小标题padding */
    font-size: 14px;
    margin: 0;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }

  .search-content {
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }

  .result-container {
    padding: 4px 12px;
  }

  .message-wrapper {
    min-height: calc(100vh - 160px);
  }

  .message-container {
    padding: 12px;
  }

  .message-text {
    font-size: 14px;
  }

  .cert-number-box {
    padding: 8px;
    margin-bottom: 8px;
    font-size: 14px;
  }

  .cert-content-box {
    margin-bottom: 4px;
  }

  .cert-content-box :deep(.el-descriptions__label) {
    font-size: 14px !important;
  }

  .cert-content-box :deep(.el-descriptions__content) {
    font-size: 14px !important;
  }

  .cert-footer {
    padding: 8px;
    gap: 8px;
    margin-top: 2px;
  }

  .qr-code-box {
    width: 120px;
    height: 120px;
    padding: 4px;
  }

  .action-buttons {
    gap: 8px;
  }

  .action-buttons .el-button {
    height: 32px;
    width: 120px;
    font-size: 14px;
  }

  .cert-field-item :deep(.el-descriptions-item__label) {
    padding: 6px 10px !important;
    font-size: 14px;
  }

  .cert-field-item :deep(.el-descriptions-item__content) {
    padding: 6px 10px !important;
    font-size: 14px;
  }

  .custom-text {
    font-size: 14px;
  }

  .footer {
    padding: 16px 0;
  }

  .company-name,
  .company-address,
  .company-contact {
    font-size: 14px;
    margin: 0 2px;
    line-height: 24px;
  }
}

.footer {
  min-height: 28px;
  background-color: #fff;
  border-top: 1px solid #e2e8f0;
  padding: 0;
}

.footer-content {
  min-height: 28px;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  line-height: 1.5;
  padding: 4px 0;
}

.company-info {
  margin: 0;
  line-height: 1.5;
  font-size: 14px;
  color: #666;
}

/* 移动端样式 */
@media screen and (max-width: 768px) {
  .el-footer {
    height: auto !important;
  }

  .footer,
  .footer-content,
  .company-info {
    height: auto;
    line-height: 1.5;
    padding: 2px 0;
  }

  .company-name,
  .company-address,
  .company-contact {
    font-size: 11px;
    margin: 0 2px;
    line-height: 1.5;
  }

  .result-container {
    height: calc(88vh - 24px);
  }
}

.cert-field-item :deep(.el-descriptions-item__label) {
  width: 33.33% !important;
  background-color: #f8fafc !important;
  color: #64748b;
  font-weight: normal;
  font-size: 15px;
  border-right: 1px solid #e2e8f0;
  padding: 8px 12px !important;
  line-height: 1.3;
  text-align: center;
}

.cert-field-item :deep(.el-descriptions-item__content) {
  width: 66.67% !important;
  color: #1e293b;
  font-size: 15px;
  padding: 8px 12px !important;
  line-height: 1.3;
}

.cert-field-item :deep(.el-descriptions-item__container) {
  border-bottom: 1px solid #e2e8f0;
}

.cert-field-item:last-child :deep(.el-descriptions-item__container) {
  border-bottom: none;
}

.certificate-inactive {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.certificate-inactive img {
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
}

.inactive-text {
  font-size: 18px;
  color: #909399;
  text-align: center;
}

.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.not-found img {
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
}

.not-found-text {
  font-size: 18px;
  color: #909399;
  text-align: center;
}

.certificate-container {
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}

.not-found-message,
.inactive-message {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;

  img {
    width: 200px;
    height: 200px;
    margin-bottom: 20px;
  }

  .message {
    font-size: 18px;
    color: #64748b;
  }
}

/* 未找到证书和停用证书的样式 */
.message-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 40px;
}

.message-text {
  font-size: 18px;
  color: #909399;
  text-align: center;
  margin-top: 20px;
}

/* 移动端样式 */
@media screen and (max-width: 768px) {
  .result-area {
    min-height: 300px;
  }

  .message-container {
    min-height: 300px;
  }
}

/* 移动端进一步优化 */
@media screen and (max-width: 768px) {
  .cert-field-item :deep(.el-descriptions-item__label) {
    padding: 5px 10px !important;
    font-size: 14px;
  }

  .cert-field-item :deep(.el-descriptions-item__content) {
    padding: 5px 10px !important;
    font-size: 14px;
  }
}

/* 证书内容 */
.certificate-content {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  flex: 1;
  min-height: 0;
}

.cert-info-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.cert-footer {
  margin-top: auto;
  padding: 1vh 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5vh;
  border-top: none;
  background: #fff;
}

/* 移动端样式 */
@media screen and (max-width: 768px) {
  .el-footer {
    height: 24px !important;
  }

  .cert-info-area {
    padding: 0.5vh 12px 0;
  }

  .cert-footer {
    padding: 0.5vh 0;
    gap: 0.5vh;
  }
}

.el-footer {
  height: auto !important;
  min-height: 10px;
  padding: 0;
  background-color: #fff;
  flex-shrink: 0;
}

.footer {
  min-height: 28px;
  background-color: #fff;
  border-top: 1px solid #e2e8f0;
  padding: 0;
}

.footer-content {
  min-height: 28px;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  line-height: 1.5;
  padding: 4px 0;
}

.company-info {
  margin: 0;
  line-height: 1.5;
  font-size: 14px;
  color: #666;
}

.company-name,
.company-address,
.company-contact {
  display: inline-block;
  margin: 0 4px;
  padding: 0;
  font-size: 12px;
  color: #666;
  line-height: 28px;
  vertical-align: middle;
}

/* 移动端样式 */
@media screen and (max-width: 768px) {
  .el-footer {
    height: auto !important; /* 设置为自适应高度 */
  }

  .footer,
  .footer-content,
  .company-info {
    height: auto;
    line-height: 1.3;
    padding: 2px 0;
  }

  .company-name,
  .company-address,
  .company-contact {
    font-size: 11px;
    margin: 0 2px;
    line-height: 1.5;
  }

  .result-container {
    height: calc(88vh - 24px);
  }
}

/* 搜索框字体 */
.search-box :deep(.el-input__inner) {
  font-family: 'PingFang SC', 'SF Pro SC', 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue',
    'Helvetica', 'Arial', sans-serif;
}

/* 证书内容字体 */
.cert-content-box :deep(.el-descriptions__label),
.cert-content-box :deep(.el-descriptions__content) {
  font-family: 'PingFang SC', 'SF Pro SC', 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue',
    'Helvetica', 'Arial', sans-serif;
}

/* 按钮字体 */
.action-buttons .el-button {
  font-family: 'PingFang SC', 'SF Pro SC', 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue',
    'Helvetica', 'Arial', sans-serif;
}

/* 页尾字体 */
.company-name,
.company-address,
.company-contact {
  font-family: 'PingFang SC', 'SF Pro SC', 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue',
    'Helvetica', 'Arial', sans-serif;
}

/* 消息文本字体 */
.message-text {
  font-family: 'PingFang SC', 'SF Pro SC', 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue',
    'Helvetica', 'Arial', sans-serif;
}

/* 全局字体设置 */
:deep(*) {
  font-family: 'PingFang SC', 'SF Pro SC', 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue',
    'Helvetica', 'Arial', sans-serif !important;
}

/* 搜索框样式 */
.search-box :deep(.el-input__wrapper) {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
}

.search-box :deep(.el-input-group__append) {
  background-color: #3b82f6;
  border-color: #3b82f6;
  color: white;
  padding: 0 20px;
}

/* 移除重复的字体定义 */
.home,
h1,
.message-text,
.cert-content-box :deep(.el-descriptions__label),
.cert-content-box :deep(.el-descriptions__content),
.action-buttons .el-button,
.company-name,
.company-address,
.company-contact {
  font-family: inherit;
}

/* 移动端样式 */
@media screen and (max-width: 768px) {
  h1 {
    margin: 0;
    border-radius: 0;
    font-size: 16px;
  }

  .search-box {
    margin: 8px auto;
  }

  .search-button {
    margin-bottom: 8px;
  }
}

.search-tip {
  color: #333;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  padding: 0;
  margin: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 0;
}

/* 移动端样式 */
@media screen and (max-width: 768px) {
  .search-tip {
    font-size: 14px;
    height: 24px;
    margin: 4px 0; /* 减小上下margin */
    padding: 0 12px;
  }
}

.divider {
  height: 1px;
  background-color: #e2e8f0;
  margin: 0;
  width: 720px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.divider::after {
  content: none;
}

/* 移动端样式 */
@media screen and (max-width: 768px) {
  .divider {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #e2e8f0;
  }
}

/* 结果区域 */
.result-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 720px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.certificate-content {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  flex: 1;
  min-height: 0;
}

/* 移动端样式 */
@media screen and (max-width: 768px) {
  .search-area {
    padding: 0;
    max-width: 100%;
  }

  h1 {
    padding: 8px; /* 减小标题padding */
    font-size: 14px;
    margin: 0;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }

  .search-content {
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }

  .search-tip {
    font-size: 14px;
    height: 24px;
    margin: 4px 0; /* 减小上下margin */
    padding: 0 12px;
  }

  :deep(.el-input) {
    margin: 4px 12px; /* 减小上下margin */
    width: calc(100% - 24px);
  }

  .search-button {
    margin: 0 12px 8px 12px; /* 减小下margin */
    width: calc(100% - 24px);
  }

  .result-container {
    padding: 0;
    max-width: 100%;
  }
}

/* 移动端样式 */
@media screen and (max-width: 768px) {
  .home {
    min-height: 100vh;
  }

  .el-container {
    min-height: 100%;
  }

  .el-main {
    flex: 1;
  }

  .result-container {
    width: 100%;
    padding: 0;
    max-width: 100%;
  }

  .cert-info-area {
    padding: 0.5vh 12px 0;
  }

  .result-container {
    height: auto; /* 移除固定高度 */
  }
}
</style>
